<template>
  <div class="goshopping">
    <div class="shopping" v-for="(item, index) in arr" :key="index">
      <div class="leftimg">
        <div class="leftimg--img">
          <img :src="item.picture" alt="" />
        </div>
      </div>

      <div class="right">
        <div class="top" style="margin-bottom: 15px; color: gray">
          {{ item.name }}
        </div>
        <div class="mainn" style="margin-bottom: 22px">{{ item.unit }}</div>
        <span style="color: red">爆爆团价</span>
        <div class="jine">
          <div class="left">
            <div class="money">
              ￥<span>{{ item.min_price }}</span>
            </div>
            <div class="dazhe">{{ item.promotion_info }}</div>
          </div>

          <div class="right">
            <div class="mashangqiang" @click="faseh(item)">
              {{ item.stus ? "马上抢" : "已抢" }}
            </div>

            <div class="yishou">
              {{ item.month_saled_content }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { baobao_list } from "../axios/api";

export default {
  data() {
    return {
      arr: [],
    };
  },
  methods: {
    faseh(item) {
      item.stus = !item.stus;
    },
  },
  mounted() {
    baobao_list({ status: 1 }).then((res) => {
      console.log(res.data);
      this.arr = res.data.list;
      this.arr.forEach((item) => {
        this.$set(item, "stus", true)
        
        
      })
     
    });
  },
};
</script>

<style lang='scss' scoped>
.goshopping {
  width: 100%;
  height: 100%;
  margin-top: 50px;

  .shopping {
    width: 100%;
    height: 200px;
    margin-top: 50px;
    display: flex;
    margin-bottom: 50px;
    // border: 1px solid #555;
    background: #ccc;
    border-radius: 10px;

    .leftimg {
      width: 30%;
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;

      .leftimg--img {
        width: 80%;
        height: 60%;
        border: 1px solid red;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .right {
      width: 70%;
      height: 100%;

      .jine {
        width: 100%;
        height: 70px;
        // background-color: orchid;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 50%;
          height: 100%;
          //   background-color: aqua;

          .money {
            margin-top: 10px;

            span {
              color: red;
              font-size: 20px;
            }
          }

          .dazhe {
            width: 50px;
            height: 30px;
            border: 1px solid red;
            border-radius: 10px;
            text-align: center;
            line-height: 30px;
            color: red;
          }
        }

        .right {
          width: 50%;
          height: 100%;
          //   background-color: orchid;

          .mashangqiang {
            width: 90px;
            height: 40px;
            background-color: red;
            float: right;
            border-radius: 25px;
            text-align: center;
            line-height: 40px;
            color: #fff;
          }

          .yishou {
            float: right;
            margin-right: 15px;
            margin-top: 5px;
            color: red;
          }
        }
      }
    }
  }
}
</style>